<%--
  Created by IntelliJ IDEA.
  User: SYHT
  Date: 2017/7/10
  Time: 15:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--解析表达式--%>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <jsp:include page="distforeEnd.jsp"/>
    <script>

        $(document).ready(function () {
            $(".email_login").click(function () {
                $(".phone_in").hide();
                $(".email_in").show();
                $(".email_s").css("display", "inline-block");
                $(".phone_s").css("display", "none");
            });

            $(".phone_login").click(function () {
                $(".email_in").hide();
                $(".phone_in").show();
                $(".email_s").css("display", "none");
                $(".phone_s").css("display", "inline-block");
            });
            $(".reg_perbut").click(function () {
                $(".reg_person").animate({left: '0'});
                $(".reg_company").animate({left: '500px'});
                $(".reg_perbut").css("display", "none");
                $(".reg_combut").css("display", "inline-block");
                $(".re_im2").css("display", "none");
                $(".re_im").css("display", "inline-block");
                $(".h42").css("display", "none");
                $(".h41").css("display", "block");
            });
            $(".reg_combut").click(function () {
                $(".reg_person").animate({left: '-500px'});
                $(".reg_company").animate({left: '0'});
                $(".reg_combut").css("display", "none");
                $(".reg_perbut").css("display", "inline-block");
                $(".re_im").css("display", "none");
                $(".re_im2").css("display", "inline-block");
                $(".h41").css("display", "none");
                $(".h42").css("display", "block");
            });
////个人注册
//            $(".email_reg").click(function () {
//                $(".reg_phonea").hide();
//                $(".reg_emaila").show();
//                $(".email_b").css("display", "inline-block");
//                $(".phone_b").css("display", "none");
//            });
//
//            $(".phone_reg").click(function () {
//                $(".reg_emaila").hide();
//                $(".reg_phonea").show();
//                $(".email_b").css("display", "none");
//                $(".phone_b").css("display", "inline-block");
//            });
////公司注册
//            $(".email_reg2").click(function () {
//                $(".reg_comphone").hide();
//                $(".reg_comemail").show();
//                $(".email_b2").css("display", "inline-block");
//                $(".phone_b2").css("display", "none");
//            });
//
//            $(".phone_reg2").click(function () {
//                $(".reg_comemail").hide();
//                $(".reg_comphone").show();
//                $(".email_b2").css("display", "none");
//                $(".phone_b2").css("display", "inline-block");
//            });
        });
    </script>


</head>
<body background="${pageContext.request.contextPath}/dist/foreEnd3/img/bblack2.jpg" class="login_body"
      style="background-position: center;background-repeat: no-repeat">

<!--<img src="img/scsc.jpg" alt="" class="login_img">-->
<div class="login_img">
    <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/LOGO1.png" alt="" class="login_logo">

    <div id="myCarousel" class="carousel slide change_all" data-ride="carousel">

        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="change_out">
                    <ul class="change_one">
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img1">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jifanxi.jpg"
                                 class="change_img1">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img1">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/baishi.jpg"
                                 class="change_img1">
                        </li>
                    </ul>

                    <ul class="change_two">
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img2">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/tianmao.jpg"
                                 class="change_img2">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img2">
                        </li>
                    </ul>

                    <ul class="change_two">
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/yijia.JPEG"
                                 class="change_img2">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img2">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/amani.jpg"
                                 class="change_img2">
                        </li>
                    </ul>

                    <ul class="change_three">
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/baishi.jpg"
                                 class="change_img3">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/bishengke.jpg"
                                 class="change_img3">
                        </li>

                    </ul>
                </div>
            </div>

            <div class="item">
                <div class="change_out">
                    <ul class="change_one">
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img1">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img1">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img1">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img1">
                        </li>
                    </ul>

                    <ul class="change_two">
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img2">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img2">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img2">
                        </li>
                    </ul>

                    <ul class="change_two">
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img2">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img2">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img2">
                        </li>
                    </ul>

                    <ul class="change_three">
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img3">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img3">
                        </li>

                    </ul>
                </div>
            </div>

            <div class="item">
                <div class="change_out">
                    <ul class="change_one">
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img1">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img1">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img1">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img1">
                        </li>
                    </ul>

                    <ul class="change_two">
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img2">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img2">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img2">
                        </li>
                    </ul>

                    <ul class="change_two">
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img2">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img2">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img2">
                        </li>
                    </ul>

                    <ul class="change_three">
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img3">
                        </li>
                        <li>
                            <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"
                                 class="change_img3">
                        </li>

                    </ul>
                </div>
            </div>
        </div>

    </div>


    <%--登录框--%>
    <div class="login_all">

        <div class="login_in">
            <%--<button type="button" class="login_com">企业登录 <span class="fa fa-arrow-right" style="color: #3d9ccc"></span></button>--%>
            <h2>欢迎登录先知账号</h2>
            <div class="login_ball">
                <div class="email_o">
                    <button class="email_login">邮箱登录</button>
                    <div class="email_s"></div>
                </div>
                <div class="phone_o">
                    <button class="phone_login">手机登录</button>
                    <div class="phone_s"></div>
                </div>
            </div>

            <div class="email_in">
                <form action="${pageContext.request.contextPath}/XzLogin/Login.do" method="post">
                    <div class="login_input" style="margin-top: 20px">
                        <input class="effect-4" type="text" name="username" value="${username}" placeholder="请输入邮箱">
                        <span class="focus-border"></span>
                    </div>

                    <div class="login_input" style="margin-top: 30px">
                        <input class="effect-4" type="password" name="password" placeholder="请输入密码">
                        <span class="focus-border"></span>
                    </div>

                    <div class="login_err">
                        <c:if test="${msg!=null}">
                            <span class="fa fa-exclamation-triangle">&nbsp;</span>${msg}
                        </c:if>
                    </div>

                    <div style="margin-top: 15px;overflow: hidden">
                        <a class="login_forget"
                           href="${pageContext.request.contextPath}/view/foreEnd3/retrievepassword.html">忘记密码?</a>
                        <span class="login_remember">
                            <input type="checkbox" name="remember" value="true">
                        记住我
                    </span>
                    </div>
                    <button type="submit" class="login_button">用户登录</button>
                    <a href="#0" class="login_re allregister">没有账号？ 立即注册</a>
                </form>
            </div>

            <div class="phone_in">
                <form action="${pageContext.request.contextPath}/XzLogin/LoginPhone.do" method="post">
                    <div class="login_input" style="margin-top: 20px">
                        <input id="phone" class="effect-4" type="text" name="username" value="${username}" placeholder="请输入手机号">
                        <span class="focus-border"></span>
                        <button id="singCode" type="button" onclick="keyPhonesing()"  class="but_get">获取验证码</button>
                    </div>

                    <div class="login_input" style="margin-top: 30px">
                        <input class="effect-4" type="text" name="password" placeholder="请输入验证码">
                        <span class="focus-border"></span>
                    </div>

                    <div id="singMsg" class="login_err">
                        <c:if test="${msg!=null}">
                            <span class="fa fa-exclamation-triangle">&nbsp;</span>${msg}
                        </c:if>
                    </div>

                    <div style="margin-top: 15px;overflow: hidden">
                        <a class="login_forget"
                           href="${pageContext.request.contextPath}/view/foreEnd3/retrievepassword.html">忘记密码?</a>
                        <span class="login_remember">
                            <input type="checkbox" name="remember" value="true">
                        记住我
                    </span>

                    </div>
                    <button type="submit" class="login_button">用户登录</button>
                    <a href="#0" class="login_re allregister">没有账号？ 立即注册</a>
                </form>
            </div>

        </div>
    </div>

</div>
<jsp:include page="registerall.jsp"/>
<%--<div class="allpop" role="alert">--%>
<%--<div class="all_container">--%>
<%--<div class="index_tan">--%>


<%--<img src="${pageContext.request.contextPath}/dist/foreEnd3/img/ren.png" alt="" class="re_im">--%>
<%--<img src="${pageContext.request.contextPath}/dist/foreEnd3/img/gong.png" alt="" class="re_im2">--%>
<%--<h4 style="font-size: 22px" class="h41">用户注册</h4>--%>
<%--<h4 style="font-size: 22px" class="h42">企业注册</h4>--%>
<%--<div class="reg_out">--%>
<%--<div class="reg_person">--%>

<%--<div class="reg_ball">--%>
<%--<div class="email_r">--%>
<%--<button class="email_reg">邮箱注册</button>--%>
<%--<div class="email_b"></div>--%>
<%--</div>--%>
<%--<div class="phone_r">--%>
<%--<button class="phone_reg">手机注册</button>--%>
<%--<div class="phone_b"></div>--%>
<%--</div>--%>
<%--</div>--%>

<%--<div class="reg_emaila">--%>
<%--<form action="">--%>
<%--<div class="spe_reg">--%>
<%--<input class="reg_input" type="text" name="" placeholder="请输入邮箱">--%>
<%--<button class="reg_but">获取验证码</button>--%>
<%--</div>--%>
<%--<input class="reg_input2" type="text" name="" placeholder="请输入验证码">--%>
<%--<input class="reg_input2" type="password" name="password" placeholder="请输入密码">--%>

<%--<div class="login_err">--%>
<%--<span class="fa fa-exclamation-triangle">&nbsp;</span>--%>
<%--</div>--%>

<%--<button type="submit" class="login_button" style="width: 300px">用户邮箱注册</button>--%>
<%--</form>--%>
<%--</div>--%>

<%--<div class="reg_phonea">--%>
<%--<form action="">--%>
<%--<div class="spe_reg">--%>
<%--<input class="reg_input" type="text" name="" placeholder="请输入手机号">--%>
<%--<button class="reg_but">获取验证码</button>--%>
<%--</div>--%>
<%--<input class="reg_input2" type="text" name="" placeholder="请输入验证码">--%>
<%--<input class="reg_input2" type="password" name="password" placeholder="请输入密码">--%>

<%--<div class="login_err">--%>
<%--<span class="fa fa-exclamation-triangle">&nbsp;</span>--%>
<%--</div>--%>

<%--<button type="submit" class="login_button" style="width: 300px">用户手机注册</button>--%>
<%--</form>--%>
<%--</div>--%>
<%--</div>--%>

<%--<div class="reg_company">--%>

<%--<div class="reg_ball2">--%>
<%--<div class="email_r2">--%>
<%--<button class="email_reg2">邮箱注册</button>--%>
<%--<div class="email_b2"></div>--%>
<%--</div>--%>
<%--<div class="phone_r2">--%>
<%--<button class="phone_reg2">手机注册</button>--%>
<%--<div class="phone_b2"></div>--%>
<%--</div>--%>
<%--</div>--%>

<%--<div class="reg_comemail">--%>
<%--<form action="">--%>
<%--<div class="spe_reg">--%>
<%--<input class="reg_input" type="text" name="" placeholder="请输入邮箱">--%>
<%--<button class="reg_but">获取验证码</button>--%>
<%--</div>--%>
<%--<input class="reg_input2" type="text" name="" placeholder="请输入验证码">--%>
<%--<input class="reg_input2" type="password" name="password" placeholder="请输入密码">--%>

<%--<div class="login_err">--%>
<%--<span class="fa fa-exclamation-triangle">&nbsp;</span>--%>
<%--</div>--%>

<%--<button type="submit" class="login_button" style="width: 300px">企业邮箱注册</button>--%>
<%--</form>--%>
<%--</div>--%>

<%--<div class="reg_comphone">--%>
<%--<form action="">--%>
<%--<div class="spe_reg">--%>
<%--<input class="reg_input" type="text" name="" placeholder="请输入手机号">--%>
<%--<button class="reg_but">获取验证码</button>--%>
<%--</div>--%>
<%--<input class="reg_input2" type="text" name="" placeholder="请输入验证码">--%>
<%--<input class="reg_input2" type="password" name="password" placeholder="请输入密码">--%>

<%--<div class="login_err">--%>
<%--<span class="fa fa-exclamation-triangle">&nbsp;</span>--%>
<%--</div>--%>

<%--<button type="submit" class="login_button" style="width: 300px">企业手机注册</button>--%>
<%--</form>--%>
<%--</div>--%>
<%--</div>--%>

<%--</div>--%>

<%--<a class="reg_perbut" style="display: none">--%>
<%--<span class="fa fa-arrow-circle-right" style="color: #ffa500;display: inline-block"></span>--%>
<%--切换到用户注册--%>
<%--</a>--%>
<%--<a class="reg_combut">--%>
<%--<span class="fa fa-arrow-circle-left" style="color: #ffa500;display: inline-block"></span>--%>
<%--切换到企业注册--%>
<%--</a>--%>

<%--</div>--%>
<%--<a href="#0" class="all_close cmd_close"></a>--%>
<%--</div>--%>
<%--</div>--%>

<script>
    function keyPhonesing() {
        var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
        var str = document.getElementById("phone").value;
        if (phoneReg.test(str)) {
            var i = 60;
            $('#singCode').css("backgroundColor", "#aeaeae");
            $('#singCode').attr("disabled", true);
            pet = setInterval(function () {
                i--;
                $('#singCode').html("获取验证码(" + i + ")");
                if (i == 0) {
                    clearInterval(pet);
                    $('#singCode').css("backgroundColor", "");
                    $('#singCode').attr("disabled", false);
                    $('#singCode').html("获取验证码");
                }
            }, 1000)
            $.ajax({
                url: '${pageContext.request.contextPath}/XzLogin/loginPhoneSing.do',
                data: {phone: str},
                success: function (data) {
                    if (data.msg != "ok") {
                        $('#singMsg').html('<span class="fa fa-exclamation-triangle">&nbsp;</span>' + '发送失败');
                    }
                }
            });
        } else {
            $('#singMsg').html('<span class="fa fa-exclamation-triangle">&nbsp;</span>' + '手机格式错误');
        }
    }
</script>
<script>
    $(function () {
        $('#myCarousel-ad').carousel({
            interval: 5000
        });
    });
</script>
</body>
</html>
